<script>
// import axios from "axios";

// import axios from "axios";

export default {
  name: "loginIndex",
  data() {
    return {
      loginParams: {
        username: 'admin',
        password: 'admin123',
        token: null,
      },
    }
  },
  created() {

  },
  methods: {
    loginBtn() {
      // axios.post('http://8.130.82.196:8081/ruoyi-admin/login', {
      //   username: this.loginParams.username,
      //   password: this.loginParams.password,
      // }).then(res => {
      //   console.log(res)
      //   if (res.data.code === 200) {

      this.$store.state.userInfolist = {
        // token: res.data.token,
        username: this.loginParams.username,
        password: this.loginParams.password
      }
      // this.loginParams.token = res.data.token;
      this.$router.push({path: '/index'})
      window.localStorage.setItem('userInfolist', JSON.stringify(this.$store.state.userInfolist))
      // this.$store.state.userInfolist = this.loginParams
      // } else {
      //   this.$message.error(res.data.msg);
      // }
      // })
    }
  }
}
</script>

<template>
  <div class="main">
    <div class="Box">
      <div class="left">

        <!--        <div class="centerBox">-->
        <div class="topBox">
          <h1>赋能万物</h1>
        </div>
        <div class="bottomBox">
          <h1>连接未来</h1>
        </div>
      </div>
      <div class="right">
        <div class="title">企业综合管理平台</div>
        <div style="overflow: hidden">
          <el-form :model="loginParams" label-width="80">
            <el-form-item label="用户名" style="margin-bottom: 10px">
              <el-input v-model="loginParams.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="margin-bottom: 10px">
              <el-input type="password" v-model="loginParams.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="padding: 10px 40px" type="primary" @click="loginBtn">登录</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
  </div>

</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.right {
  .title {
    margin-top: 5vh;
    font-size: 24px;
  }
}

.left {
  //overflow: hidden;
  position: relative;

  .topBox {
    position: absolute;
    top: 10vh;
    left: 5vw;
    //float: left;
  }

  .bottomBox {
    //float: right;
    position: absolute;
    bottom: 10vh;
    right: 5vw;
  }
}

.main {

  //1.直接使用backdrop-filter进行模糊

  //backdrop-filter: blur(3px);

  //2。先设置background再设置filter进行模糊

  //background: url("MovingHeart.gif");
  //filter: blur(3px);

  height: 100vh;
  background: url("../image/login-back.png") no-repeat;
  background-size: cover;
}

h2 {
  color: white;
}

h1 {
  color: white;
}

.Box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  display: flex;
}

.left {
  letter-spacing: 10px;
  position: relative;
  width: 50%;
  height: 100%;
  background-color: rgba(57, 99, 134, 0.75);
}

.right {
  position: relative;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.centerBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  text-align: center;
}

//.left img {
//  width: 50px;
//  height: 50px;
//  margin-bottom: 5px;
//}

.left p {
  font-size: 14px;
  color: #fff;
}

.left h4 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.right form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  height: 30px;
  border: 1px solid #767676;
  background-color: transparent;
  padding-left: 10px;
  font-size: 12px;
  color: #000000;
  margin-bottom: 15px;
  outline: none;
}

.loginBtn {
  width: 100%;
  height: 35px;
  line-height: 32px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  border-radius: 6px;
  background: rgb(57, 99, 134);
  outline: none;
  border: none;
  margin-top: 10px;
}

.no {
  cursor: pointer;
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
  color: #828282;
}
</style>
